<template>
  <div class="app-container">
<!--    查询组件-->
    <div style="height: auto">
      <div style="">
        <div>
          <el-button  style="display: inline-block;float: right;width: 100px" type="primary" @click="" >查询</el-button>
          <el-date-picker
            v-model="PurQuery.contractDate"
            style="display: inline-block;float: right;width: 130px;margin-right: 5px"
            type="month"
            placeholder="截止日期">
          </el-date-picker>
          <el-date-picker
            v-model="PurQuery.contractDate"
            style="display: inline-block;float: right;width: 130px;margin-right: 5px"
            type="month"
            placeholder="开始日期">
          </el-date-picker>
          <el-input  placeholder="真实姓名"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
          <el-input  placeholder="登录名称"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
        </div>
      </div>
    </div>
<!--    表格组件-->
    <el-table
      ref="purTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="登录名" width="400" align="center">
        <template slot-scope="scope">
          {{ scope.row.contractType }}
        </template>
      </el-table-column>
      <el-table-column label="真实姓名" width="400" align="center">
        <template slot-scope="scope">
          {{ scope.row.contractNum }}
        </template>
      </el-table-column>
      <el-table-column label="IP地址" width="400" align="center">
        <template slot-scope="scope">
          {{ scope.row.contractDate}}
        </template>
      </el-table-column>
      <el-table-column label="登录日期" width="400" align="center">
        <template slot-scope="scope">
          {{ scope.row.supplier }}
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
        background

        @current-change="handleCurrentChange"

        :current-page="pagination.currentPage"

        :page-size="pagination.pageSize"

        layout="total, prev, pager, next, jumper"

        :total="pagination.total">

      </el-pagination>
    </div>


  </div>
</template>

<script>
import { getById,getList, addPurcontact,UpdatePurcontact } from '@/api/purchase'

export default {
  data() {
    return {
      files: "",
      dialogFormVisible: false,
      dialogForm4Visible: false,
      contractData: { },
      PurQuery:{ },
      billData:{},
      rules: {//校验规则
        contractType: [{ required: true, message: '类型为必填项', trigger: 'change' }],
        contractNum: [{ required: true, message: '合同编号为必填项', trigger: 'blur' }],
        contractDate: [{type: 'date', required: true, message: '合同时间为必填项', trigger: 'blur' }],
        supplier: [{ required: true, message: '供应商为必填项', trigger: 'blur' }],
        contractMoney: [{required: true, message: '合同金额为必填项', trigger: 'blur' }],
        // files: [{ required: true, message: '附件为必填项', trigger: 'change' }]
      },
      list: null,
      listLoading: true,
      fileList: [],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
      },
      optionsquery1: [{
        value: '0',
        label: '新增'
      }, {
        value: '1',
        label: '修改'
      }, {
        value: '2',
        label: '删除'
      }],
      optionsquery2: [{
        value: '0',
        label: '角色表'
      }, {
        value: '1',
        label: '管理员'
      }],
      contractAllmoney: null,
      drawer: false

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
    //查询所有
    getAll() {
      getList(this.pagination).then(response => {
        this.list = response.data.purList
        this.pagination.currentPage = response.data.page.number + 1
        this.pagination.pageSize = response.data.page.size
        this.pagination.total = response.data.page.totalElements
        this.listLoading = false
        this.contractAllmoney=response.data.sumPurMoney
        }
      )
    },

    fetchData() {
      this.listLoading = true

      this.getAll()
    },
    //取消按钮
    cancel() {
      this.dialogForm4Visible = false
      this.dialogFormVisible = false
      this.contractData = {}
      this.data = {}
      this.fileList= []
      this.$refs.dataAddForm.resetFields()
      this.$refs.upload.clearFiles()
    },
    //弹出折叠面板
    toogleExpand(row) {
      const purTable = this.$refs.purTable
      // 注意，这里的 this.list 是上面 data 中的 list
      // 通过比对数据与行里的数据，对展开行进行控制，获取对应值
      this.list.map((item) => {
        if (row.id !== item.id) {
          purTable.toggleRowExpansion(item, false)
        }
      })
      purTable.toggleRowExpansion(row)
    },
    addBillRow(){
      let billRowData = {
        modle:"",
        goodsName:"",
        xx1:"",
        xx2:"",
        xx3:"",
        xx4:""
      }
      this.billData.billGood.unshift(billRowData)
      this.billData.billGood.row.$index += 1
    }

  },
  computed: {

  }
}
</script>
